﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
    request.setAttribute("path", request.getContextPath());
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表-青鸟会员服务</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="${path}/assets/font/iconsmind-s/css/iconsminds.css"/>
    <link rel="stylesheet" href="${path}/assets/font/simple-line-icons/css/simple-line-icons.css"/>
    <link rel="stylesheet" href="${path}/assets/css/vendor/bootstrap.min.css"/>
    <link rel="stylesheet" href="${path}/assets/css/vendor/bootstrap.rtl.only.min.css"/>
    <link rel="stylesheet" href="${path}/assets/css/vendor/jquery.contextMenu.min.css"/>
    <link rel="stylesheet" href="${path}/assets/css/vendor/perfect-scrollbar.css"/>
    <link rel="stylesheet" href="${path}/assets/css/vendor/component-custom-switch.min.css"/>
    <link rel="stylesheet" href="${path}/assets/css/main.css"/>
    <link rel="icon" href="${path}/jbs/images/ico.ico" type="image/x-icon">
</head>

<body id="app-container" class="menu-default show-spinner">
<nav class="navbar fixed-top">
    <a class="navbar-logo" href="${path}/Index">
        <img src="${path}/assets/img/logo/logoWhiteText.png" alt="" style="margin-left: 20px">
    </a>
    <div class="search" data-search-path="Pages.Search.html?q=">
        <input placeholder="搜索商品...">
        <span class="search-icon">
                    <i class="simple-icon-magnifier"></i>
                </span>
    </div>
    <div class="navbar-right">
        <button class="btn1 rounded-btn">青鸟优选首页</button>
        <button class="btn1 rounded-btn">购物车</button>
        <button class="btn1 rounded-btn">商品分类</button>
        <div class="user d-inline-block">
            <button class="btn btn-empty p-0" type="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                <span class="name">${requestScope.user.loginname}</span>
                <span>
                        <img alt="Profile Picture" src="${requestScope.user.pic_link}"
                             style="height: 50px;width: 50px"/>
                    </span>
            </button>
        </div>
    </div>
</nav>
<div class="menu">
    <div class="main-menu">
        <div class="scroll">
            <ul class="list-unstyled">
                <li >
                    <a href="${path}/User">
                        <i class="iconsminds-crown-2"></i>
                        <span>会员首页</span>
                    </a>
                </li>
                <li class="active">
                    <a href="${path}/Orders">
                        <i class="iconsminds-digital-drawing"></i> 历史订单
                    </a>
                </li>
                <li>
                    <a href="#layouts">
                        <i class="iconsminds-heart"></i>我的收藏
                    </a>
                </li>
                <li>
                    <a href="#layouts">
                        <i class="iconsminds-address-book-2"></i>地址管理
                    </a>
                </li>
                <li>
                    <a href="#layouts">
                        <i class="iconsminds-security-settings"></i>账户安全
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<main>
    <div class="container-fluid disable-text-selection">
        <div class="row">
            <div class="col-12">
                <div class="mb-3">
                    <h1>订单信息</h1>
                </div>

                <div class="separator mb-5"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-12 list" data-check-all="checkAll">
                <ul style="list-style: none">
                    <c:forEach items="${requestScope.ordersList}" begin="0" end="${fn:length(requestScope.ordersList)}"
                               var="i">
                        <c:choose>
                        <c:when test="${i.stat==0}">
                            <button class="btn-outline-primary rounded-btn bg-transparent payPendingBtn">立即支付</button>
                            <button class="btn-outline-primary rounded-btn bg-transparent payPendingBtn">取消订单</button>
                            <li class="order_collapsePending mb-3">
                                <a data-toggle="collapse" data-target="#collapse_${i.serial}" aria-expanded="true"
                                   aria-controls="collapseComponents" class="collapseZone">
                                <span class="d-inline-block">订单号：${i.serial}，共${i.count}件商品，总金额¥${i.cost}
                                    <p>${i.userAddress}.</p></span>
                                    <i class="simple-icon-arrow-down position-absolute"
                                       style="top: 2.2rem;right: 3rem "></i>
                                </a>
                                <div id="collapse_${i.serial}" class="collapse show">
                                    <div class="pl-2 min-width-zero detailsTitle">
                                        <div class="card d-flex flex-row mb-3 justify-content-between" id="test">
                                            <a class="d-flex detailsElementTitle"
                                               style="flex-basis:3.5%;margin-left: 2.5rem" href="Pages.Product.Detail.html">
                                                商品
                                            </a>
                                            <a href="Pages.Product.Detail.html" style="flex-basis:50%"
                                               class="detailsElementTitle">商品名称</a>
                                            <p class="detailsElementTitle" style="flex-basis:6%">商品数量</p>
                                            <p class="detailsElementTitle" style="flex-basis:14%">商品搭配</p>
                                            <p class="detailsElementTitle" style="flex-basis:6%">商品价格</p>
                                            <p class="detailsElementTitle" style="flex-basis: 7%">商品状态</p>
                                        </div>
                                    </div>
                                    <ul>
                                        <c:forEach items="${i.detail}" begin="0" end="${fn:length(i.detail)}" var="detail">
                                            <li class="details">
                                                <div class="card d-flex flex-row mb-3 justify-content-between">
                                                        <a class="d-flex detailsElement"  style="flex-basis:4%"
                                                       href="${path}/details?id=${detail.good}">
                                                        <img src="${detail.pic}" alt="商品图片"
                                                             class="list-thumbnail responsive border-0 card-img-left"/>
                                                    </a>
                                                    <a href="${path}/details?id=${detail.good}" style="flex-basis:50%"
                                                       class="detailsElement">
                                                        <p class="list-item-heading mb-0 truncate"
                                                           style="max-width: 100%">${detail.name}</p>
                                                    </a>
                                                    <p class="detailsElement" style="flex-basis:7%">${detail.amount}</p>
                                                    <p class="detailsElement" style="flex-basis:15%">${detail.SUK}</p>
                                                    <p class="detailsElement" style="flex-basis:7%">${detail.singeCost}</p>
                                                    <div class="w-15 w-sm-100 detailsElement" style="flex-basis:7%">
                                                        <span class="badge badge-pill badge-secondary">${detail.statText}</span>
                                                    </div>
                                                </div>
                                                </a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="order_collapse mb-3">
                                <a data-toggle="collapse" data-target="#collapse_${i.serial}" aria-expanded="true"
                                   aria-controls="collapseComponents" class="collapseZone">
                                <span class="d-inline-block">订单号：${i.serial}，共${i.count}件商品，实付¥${i.cost}
                                    <p>${i.userAddress}.</p></span>
                                    <i class="simple-icon-arrow-down position-absolute"
                                       style="top: 2.2rem;right: 3rem "></i>
                                </a>
                                <div id="collapse_${i.serial}" class="collapse show">
                                    <div class="pl-2 min-width-zero detailsTitle">
                                        <div class="card d-flex flex-row mb-3 justify-content-between">
                                            <p class="detailsElementTitle" style="flex-basis:3.5%;margin-left: 2.5rem">商品</p>
                                            <p style="flex-basis:50%" class="detailsElementTitle">商品名称</p>
                                            <p class="detailsElementTitle" style="flex-basis:6%">商品数量</p>
                                            <p class="detailsElementTitle" style="flex-basis:14%">商品属性</p>
                                            <p class="detailsElementTitle" style="flex-basis:6%">商品价格</p>
                                            <p class="detailsElementTitle" style="flex-basis: 7%">商品状态</p>
                                        </div>
                                    </div>
                                    <ul>
                                        <c:forEach items="${i.detail}" begin="0" end="${fn:length(i.detail)}" var="detail">
                                            <li class="details">
                                                <div class="card d-flex flex-row mb-3 justify-content-between">
                                                    <a class="d-flex detailsElement" style="flex-basis:4%"
                                                       href="${path}/details?id=${detail.good}">
                                                        <img src="${detail.pic}" alt="商品图片"
                                                             class="list-thumbnail responsive border-0 card-img-left"/>
                                                    </a>
                                                    <a href="${path}/details?id=${detail.good}" style="flex-basis:50%"
                                                       class="detailsElement">
                                                        <p class="list-item-heading mb-0 truncate"
                                                           style="max-width: 100%">${detail.name}</p>
                                                    </a>
                                                    <p class="detailsElement" style="flex-basis:7%">${detail.amount}</p>
                                                    <p class="detailsElement" style="flex-basis:15%">${detail.SUK}</p>
                                                    <p class="detailsElement" style="flex-basis:7%">${detail.singeCost}</p>
                                                    <div class="w-15 w-sm-100 detailsElement" style="flex-basis:7%">
                                                        <span class="badge badge-pill badge-secondary">${detail.statText}</span>
                                                    </div>
                                                </div>
                                                </a>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </div>
                            </li>
                        </c:otherwise>
                        </c:choose>
                        <div class="separator mb-5"></div>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</main>

<footer class="page-footer">
    <div class="footer-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <p class="mb-0 text-muted">Copyright &copy 2006-2020 武汉北启至优文化科技有限公司 版权所有 All Rights Reserved.</p>
                </div>
                <div class="col-sm-6 d-none d-sm-block">
                    <img class="float-right" src="${path}/assets/img/images/payment_card.png">
                </div>
            </div>
        </div>
    </div>
</footer>

<script src="${path}/assets/js/vendor/jquery-3.3.1.min.js"></script>
<script src="${path}/assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="${path}/assets/js/vendor/perfect-scrollbar.min.js"></script>
<script src="${path}/assets/js/vendor/mousetrap.min.js"></script>
<script src="${path}/assets/js/vendor/jquery.contextMenu.min.js"></script>
<script src="${path}/assets/js/dore.script.js"></script>
<script src="${path}/assets/js/scripts.js"></script>
</body>

</html>